import { getVideoRender } from "@api";
import BackgroundImg from "@assets/bg01.jpg";
import Dragon from "@assets/dragon.png";
import Fireworks3 from "@assets/fireworks_3.png";
import Fireworks4 from "@assets/fireworks_4.png";
import Fireworks5 from "@assets/fireworks_5.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import LoadingProcess from "@plugin/LoadingProgress";
import React, { Component } from "react";
import { getChannel } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";
import styles from "./index.module.scss";
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      url: undefined,
    };
    this.loadingRef = React.createRef();
  }

  async componentDidMount() {
    const data = await this.getRenderResult();
    const taskId = sessionStorage.getItem("TASK_ID");

    if (data.mp4_url) {
      this.setState({
        url: `/activity_video_1?taskId=${taskId}`,
      });
    }
    this.loadingRef.end();

    window._ha("send", "action", "cny_activity1_makevideoloadingpage_view", {
      campaign_id: CampaignIds.activity1,
      channel: getChannel(),
    });
  }

  getRenderResult = async () => {
    return new Promise((resolve, reject) => {
      const go = setInterval(async () => {
        const { data, state } = await getVideoRender({
          taskId: sessionStorage.getItem("TASK_ID"),
        });

        if (state !== "ok") reject();
        //如果是定制版， 根据mp4_url
        if (data.mp4_url) {
          resolve(data);
          clearInterval(go);
        }
      }, 2000);
    });
  };

  handlerLoaded = async (cb = () => {}) => {
    this.props.navigate(this.state.url, {
      replace: true,
    });
  };

  render() {
    return (
      <BaseBackground
        backgroundImage={BackgroundImg}
        showFlag={false}
        hideLogo={true}
      >
        <div className={styles.loading_container}>
          <p className={styles.loadingText}></p>

          <img src={Dragon} className={styles.dragon} alt="" />
          <img src={Fireworks3} className={styles.fireworks3} alt="" />
          <img src={Fireworks4} className={styles.fireworks4} alt="" />
          <img src={Fireworks5} className={styles.fireworks5} alt="" />
          <LoadingProcess
            ref={(ref) => (this.loadingRef = ref)}
            loaded={this.handlerLoaded}
            showProcessType="number"
            requireApi={true}
            addSpace={true}
          />
        </div>
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
